<template>
  <div class="layout-container">
    <!-- 左侧侧边栏 -->
    <el-aside width="220px" class="sidebar">
      <Sidebar />
    </el-aside>
    <!-- 右侧主内容区 -->
    <el-container class="main-container">
      <el-header class="topbar">
        <Topbar />
      </el-header>
      <el-main class="main-content">
        <router-view /> <!-- 渲染对应路由的页面 -->
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Sidebar from './Sidebar.vue';
import Topbar from './Topbar.vue';
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100vh;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-content {
  padding: 24px;
  overflow-y: auto;
  background-color: #f9fafb;
}
</style>